<template>
  <el-dialog
    title="批量设置预约时段号源数"
    :visible.sync="dialogVisible"
    :destroy-on-close="true"
    width="500px">
    <div>
      <el-form
        :inline="true"
        class="ky-form-inline ky-form-inline-sm ky-form-ipt-width"
        label-width="100px">
        <el-form-item label="是否追加" style="width: 100%;">
          <el-checkbox v-model="checkNumEditType" @change="changeEditFlagLabel" style="margin-top: 8px;">追加</el-checkbox>
          <el-tooltip class="item" effect="dark" content="该追加是指在原来的数量基础上加上几个号源数" placement="top-start">
            <i class="el-icon-question mar-l-10"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="修改字段" style="width: 100%;">
          <el-radio-group v-model="updateField" @change="changeUpdateField">
            <el-radio label="checkNum">号源数</el-radio>
            <el-radio label="reserveNum">预留数</el-radio>
            <el-radio label="addNum">追加数</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="editFlagInLabel" style="width: 100%;">
          <el-input v-model="checkNumAddNum" maxlength="4" @keyup.native="checkNumAddNumChange" placeholder="请输入1~9999的数"></el-input>
        </el-form-item>
        <el-form-item label="班次" style="width: 100%;">
          <el-select v-model="checkNumSidebarIndex" clearable>
            <el-option
              v-for="(item, index) in sidebardata"
              :key="index"
              :label="item.titleLab"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取消</el-button>
      <el-button size="small" type="primary" @click="sureBtn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import { Options } from '@/utils/constant'
export default {
  props: {
    isopenapponumeditdlg: Boolean,
    sidebardata: Array
  },
  data() {
    return {
      editFlagInLabel: '修改号源数',
      checkNumEditType: false,
      checkNumAddNum: 5,
      updateField: 'checkNum',
      checkNumSidebarIndex: ''
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.isopenapponumeditdlg
      },
      set(val) {
        this.$emit('update:isopenapponumeditdlg', val)
      }
    }
  },
  watch: {},
  created() {
    console.log('appNumEditDlg->created')
  },
  beforeDestroy() {
    console.log('appNumEditDlg->beforeDestroy')
  },
  methods: {
    sureBtn() {
      this.$emit('sureEditAppoNumEvent', {
        checkNumEditType: this.checkNumEditType,
        checkNumAddNum: this.checkNumAddNum,
        updateField: this.updateField,
        checkNumSidebarIndex: this.checkNumSidebarIndex
      })
    },
    getFieldText(updateField) {
      if (updateField == 'checkNum') {
        return '号源数'
      } else if (updateField == 'reserveNum') {
        return '预留数'
      } else if (updateField == 'addNum') {
        return '追加数'
      }
    },
    changeUpdateField(value) {
      console.log('changeUpdateField', value)
      this.changeEditFlagLabel(this.checkNumEditType)
    },
    changeEditFlagLabel(value) {
      // console.log('changeEditFlagLabel', value)
      if (value) {
        this.editFlagInLabel = `追加${this.getFieldText(this.updateField)}`
      } else {
        this.editFlagInLabel = `修改${this.getFieldText(this.updateField)}`
      }
    },
    checkNumAddNumChange() {
      this.checkNumAddNum = typeof this.checkNumAddNum === 'string' ? this.checkNumAddNum.replace(/[^\d]/g, '') : ''
    }
  }
}
</script>

<style></style>
